<template>
  <div class="headPage">
    <div class="head_view_1">
      <div class="user">
        <img @click="goSearch" class="user_1" src="../assets/home/3.png" alt="" />
        <div class="user_2"></div>
        <div class="user_3" @click="getSign">
          <img class="user_3_1" src="../assets/home/4.png" alt="" />
          <span class="user_3_2">签到</span>
        </div>
        <div class="user_2"></div>
        <div class="user_3" @click="goNews">
          <img class="user_3_1" src="../assets/home/5.png" alt="" />
          <span class="user_3_2">消息</span>
        </div>
        <img v-if="token" @click="goMy" class="user_4" :src="userInfo.avatar" alt="" />
        <img v-else @click="goMy" class="user_4" src="../assets/login/11.png" alt="" />
      </div>
    </div>
    <div class="head_view_2">
      <div class="tabs_content">
        <div class="logo_content" @click="goHome">
          <img class="logo_img" src="../assets/default/6.png" alt="" />
          <div class="logo_text">
            <img src="../assets/default/9.png" alt="" />
            <div>粤港澳大湾区高端技术人才孵化基地</div>
          </div>
        </div>
        <div class="tabs">
          <div class="tabs_item" :class="props.tabsIndex == index ? 'active_item' : ''"
            @click="selectItem(index, item.path)" v-for="(item, index) in tabsData" :key="index">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <maskLayer v-model="visible" center append-to-body>
    <div class="sign">
      <div class="sign_title">
        <span>每日签到</span>
        <img @click="visible = false" src="../assets/home/14.png" alt="" />
      </div>
      <div class="sign_content">
        <div class="sign_rules" @click="openXieyi">签到规则</div>
        <div class="sign_days">
          <div class="days_1">已连续签到</div>
          <div class="days_2">
            <span class="days_num">{{ newUserInfo.consecutive_sign_in_days }}</span>
            <span class="days_tian">天</span>
          </div>
        </div>
        <div class="calendar">
          <renCalendar ref="ren" :isClick="true" :markDays="markDays" :headerBar="true" :collapsible="false"
            @onMonthClick="onMonthClick" />

          <div class="sign_btn_1" @click="confirmSign" v-if="!is_sign">立即签到</div>
          <div class="sign_btn_2" v-else>已签到</div>
        </div>
      </div>
    </div>
  </maskLayer>

  <maskLayer v-model="visibleSuccess" center append-to-body>
    <div class="sign_result">
      <div class="result_bg">
        <img class="success_icon" src="../assets/home/20.png" alt="" />
        <div class="result_text_1">签到成功</div>
        <div class="result_text_2">获得{{ signInfo.sign_in_reward }}积分</div>

        <div class="result_btn" @click="visibleSuccess = false">好的</div>
      </div>
    </div>
  </maskLayer>
  <viewAgreement ref="agreement" :score="5"></viewAgreement>
</template>

<script name="headPage" setup>
import { post662212409d82f, post66221e300962f, post661f7a29c8ae2 } from "@/utils/api.js"
import { ref, reactive, onMounted, inject } from "vue";
import { storeToRefs } from 'pinia'
import maskLayer from "./maskLayer.vue";
import renCalendar from "./ren-calendar.vue";
import viewAgreement from "./viewAgreement.vue";
import { useUserStore } from "@/stores/user";
import { useRoute, useRouter } from "vue-router";
const injectMessage = inject("$message");
const router = useRouter();
let userStore = useUserStore();
let { userInfo, token } = storeToRefs(userStore);
import emitter from "@/utils/mitt.js";


onMounted(() => {
  let today = ren.value.getToday().date;
  curDate.value = today;
  month.value = curDate.value.substring(0, 7);
});

let props = defineProps(
  {
    tabsIndex: {
      type: Number,
      default: 0
    }
  }
)

let tabsData = reactive([
  {
    name: "首页",
    path: "/",
  },
  {
    name: "开设专业",
    path: "/major",
  },
  {
    name: "校园新闻",
    path: "/news",
  },
  {
    name: "就业资讯",
    path: "/graduate",
  },
  {
    name: "知识库",
    path: "/knowledgeBase",
  },
  {
    name: "人才招聘",
    path: "",
  },
  {
    name: "VIP企业/VIP合伙人",
    path: "",
  },
]);
// let tabsIndex = ref(0);
function selectItem(index, path) {
  props.tabsIndex = index;
  if (index == 5 || index == 6) {
    injectMessage.warning('功能暂未开放，敬请期待');
    return;
  }
  if (index == 3) {
    router.push({
      path: path,
      query: {
        type: 0
      }
    });
  } else if (index == 1) {
    router.push({
      path: path,
      query: {
        id: ""
      }
    });
  } else {
    router.push({
      path: path,
    });
  }
}
// 消息
function goNews() {
  if (!token.value) {
    injectMessage.error('请登录');
    router.push({
      path: '/login'
    })
  } else {
    router.push({
      path: '/my',
      query: {
        type: 'news'
      }
    })
    emitter.emit('changeNews');
  }
}

// 签到弹窗
let visible = ref(false);
let is_sign = ref(false);
function getSign() {
  if (!token.value) {
    injectMessage.error('请登录');
    router.push({
      path: '/login'
    })
  } else {
    getData();
    post662212409d82f({
      qiandaoshijian: month.value
    }).then(res => {
      // console.log(res);
      if (res.code == 1) {
        markDays = Object.assign(markDays, res.data);
        if (res.data.length > 0) {
          res.data.indexOf(curDate.value) > -1 ? is_sign.value = true : is_sign.value = false;
        }
        visible.value = true;
      }
    }).catch(err => {
      console.log(err);
    })
  }

}

// 立即签到
let visibleSuccess = ref(false);
let signInfo = ref({});
function confirmSign() {
  post66221e300962f({

  }).then(res => {
    // console.log(res);
    if (res.code == 1) {
      signInfo.value = res.data;
      visible.value = false;
      visibleSuccess.value = true;
    }
  }).catch(err => {
    console.log(err);
  })
}
// 获取会员详细信息
let newUserInfo = reactive({});
function getData() {
  post661f7a29c8ae2({})
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        newUserInfo = Object.assign(newUserInfo, res.data);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

let agreement = ref(null);
function openXieyi() {
  agreement.value.openPopup();
}

// 日历
let ren = ref(null);
let curDate = ref("");
let month = ref("");
let markDays = reactive([]);
function onMonthClick(e) {
  month.value = e;
  getSign();
}


function goSearch() {
  router.push({
    path: "/searchCourse",
  });
}

function goMy() {
  if (token.value) {
    router.push({
      path: "/my",
    });
  } else {
    router.push({
      path: '/login'
    })
  }

}
function goHome() {
  router.push({
    path: '/'
  })
}

</script>


<style lang="scss" scoped>
.headPage {
  width: 100%;
  height: 97px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.head_view_1 {
  height: 30px;
  width: 100%;
  background: #1f52ae;

  .user {
    height: 30px;
    width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .user_1 {
      width: 13px;
      height: 13px;
      cursor: pointer;
    }

    .user_2 {
      width: 1px;
      height: 9px;
      background: #e1e1e1;
      margin: 0 8px;
      cursor: pointer;
    }

    .user_3 {
      display: flex;
      align-items: center;
      cursor: pointer;

      .user_3_1 {
        width: 13px;
        height: 13px;
        margin-right: 4px;
      }

      .user_3_2 {
        color: #fcfcfc;
        font-size: 9px;
      }
    }

    .user_4 {
      width: 22px;
      height: 22px;
      margin-left: 10px;
      border-radius: 50%;
      cursor: pointer;
      object-fit: cover;
    }
  }
}

.head_view_2 {
  height: 67px;
  width: 100%;
  // background: #32579A;
  background: rgba(42, 83, 157, 0.9);

  // opacity: 0.9;
  .tabs_content {
    height: 68px;
    width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo_content {
      display: flex;
      align-items: center;
      cursor: pointer;

      .logo_img {
        width: 36px;
        height: 36px;
      }

      .logo_text {
        margin-left: 7px;
        font-size: 8px;
        color: #fff;
        opacity: 0.8;

        img {
          width: 80px;
          height: 20px;
        }
      }
    }

    .tabs {
      display: flex;
      align-items: center;
      justify-items: flex-end;

      .tabs_item {
        color: #fff;
        font-size: 11px;
        font-weight: 500;
        opacity: 0.8;
        margin-left: 30px;
        cursor: pointer;
      }

      .active_item {
        font-weight: bold;
        opacity: 1;
      }
    }
  }
}

.sign {
  width: 237px;
  background: #fff;

  .sign_title {
    height: 28px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;
    span {
      font-weight: bold;
    }

    img {
      width: 10px;
      height: 10px;
      cursor: pointer;
    }
  }

  .sign_content {
    width: 100%;
    background: url(../assets/home/15.png) no-repeat;
    background-size: 100% 205px;
    padding: 12px 0 0;

    .sign_rules {
      width: 40px;
      height: 15px;
      background: #b4d3ef;
      border-radius: 8px 0px 0px 8px;
      color: #1f52ae;
      font-size: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 0 0 auto;
      cursor: pointer;
    }

    .sign_days {
      padding: 0 0 0 16px;

      .days_1 {
        font-size: 8px;
        font-weight: 500;
      }

      .days_2 {
        display: flex;
        align-items: center;

        .days_num {
          color: #1a1a18;
          font-size: 21px;
          font-weight: bold;
        }

        .days_tian {
          color: #1a1a18;
          font-size: 8px;
          font-weight: 500;
          margin-left: 4px;
        }
      }
    }

    .calendar {
      background: #fff;
      margin: 16px 16px 12px;
      padding: 16px 0 0;

      .sign_btn_1 {
        width: 100px;
        height: 24px;
        font-size: 8px;
        color: #fff;
        background: #1f52ae;
        border-radius: 3px;
        margin: 8px auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .sign_btn_2 {
        width: 100px;
        height: 24px;
        font-size: 8px;
        background: #eee;
        border-radius: 3px;
        margin: 8px auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
  }
}

.sign_result {
  width: 227px;
  height: 210px;
  background: #fff;

  .result_bg {
    width: 100%;
    background: url(../assets/home/19.png) no-repeat;
    background-size: 100% 178px;
    text-align: center;

    .success_icon {
      width: 100px;
      height: 100px;
      margin: 6px auto 0;
    }

    .result_text_1 {
      font-size: 12px;
      font-weight: bold;
      margin: 9px 0 0;
    }

    .result_text_2 {
      font-size: 9px;
      margin: 10px 0 0;
    }

    .result_btn {
      width: 100px;
      height: 24px;
      font-size: 8px;
      color: #fff;
      background: #1f52ae;
      border-radius: 3px;
      margin: 8px auto 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}

.agreement_content {
  width: 540px;
  height: 380px;
  background: #fff;

  .agreement_title {
    width: 100%;
    height: 28px;
    background: #1F52AE;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;

    img {
      width: 10px;
      height: 10px;
      cursor: pointer;
    }
  }

  .agreement_view {
    height: 352px;
    padding: 16px;
    font-size: 8px;
    color: #666;
  }
}
</style>